<template>
  <div class="lx__list-wrap">
    <list-query-box @tag-change="tagChange" @category-change="categoryChange" />
    <div class="article-list-box">
      <div
        class="article-item"
        v-for="article in articleList"
        :key="article.id"
      >
        <div class="article-box" @click="goToArticleInfo(article)">
          <img v-lazy="article.thumbnail" class="article-img" />
          <div class="article-title text--over">{{ article.title }}</div>
          <div class="article-meta flex">
            <span>
              <i class="iconfont icon-ego-hot hot-icon"></i>
              {{ article.viewCount || 0 }} 热度
            </span>
            <span>
              <i class="iconfont icon-pinglun1 comment-icon"></i>
              {{ article.commentCount || 0 }} 条评论
            </span>
            <span>
              <i class="iconfont icon-dianzan star-icon"></i>
              {{ article.star || 0 }} 点赞
            </span>
          </div>
          <div class="article-label flex">
            <span v-if="article.categoryName">
              <i
                class="iconfont icon-leimupinleifenleileibie2 category-icon"
              ></i>
              {{ article.categoryName || "" }}
            </span>
            <span v-if="article.tagList?.length" class="ml-10">
              <i class="iconfont icon-biaoqian1 label-icon"></i>
              {{
                article.tagList
                  ? article.tagList
                      .slice(0, 2)
                      .map((item) => item.tagName)
                      .join(" ")
                  : ""
              }}
            </span>
          </div>
          <div class="article-time article-meta">
            <i class="iconfont icon-shengchanjihua time-icon"></i>
            发布于 {{ article.createTime }}
          </div>
        </div>
      </div>
    </div>
    <div class="pagination-box flex flex--c">
      <div
        class="next-page-btn"
        @click="goToPage"
        v-if="pagination.total > articleList.length"
      >
        下一页
      </div>
      <div
        class="end-text"
        v-if="articleList.length && articleList.length >= pagination.total"
      >
        ~~到底了
      </div>
      <div class="end-text" v-if="!articleList.length">~~空空如也</div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { useNavArticle } from "@/hooks/useNavArticle";
import ListQueryBox from "./components/ListQueryBox.vue";
import { useArticleList } from "./hooks/useArticleList";
const { articleList, pagination, tagChange, categoryChange, goToPage } =
  useArticleList();
const { goToArticleInfo } = useNavArticle();
</script>
<style lang="scss" scoped>
.lx__list-wrap {
  width: 100%;
  min-height: 100%;
  .article-list-box {
    max-width: calc(1980px + 120px);
    padding: 20px 60px 30px;
    white-space: wrap;
    .article-item {
      width: calc(100% / 4);
      display: inline-block;
      padding: 10px;
      min-width: 260px;
      .article-box {
        width: 100%;
        border: 1px solid #eee;
        border-radius: 6px;
        cursor: pointer;
        .article-img {
          width: 100%;
          height: 200px;
          border-radius: 6px 6px 0 0;
        }
        .article-title {
          color: #18191c;
          height: 30px;
          line-height: 30px;
          font-size: 15px;
          padding: 0 10px;
          font-weight: bold;
        }
        .article-meta {
          font-size: 12px;
          color: #797979;
          height: 30px;
          padding: 0 10px;
          i {
            font-size: 15px;
          }
          span:not(:last-child) {
            margin-right: 10px;
          }
          .time-icon {
            color: rgb(64, 158, 255);
          }
          .hot-icon {
            color: rgb(255, 0, 0);
          }
          .star-icon {
            color: rgb(255, 113, 60);
          }
          .comment-icon {
            color: #39c5bb;
          }
        }
        .article-label {
          height: 40px;
          padding: 0 10px;
          span {
            padding: 3px 10px;
            background-color: #eee;
            border-radius: 3px;
            font-size: 14px;
            color: #797979;
            transition: all 0.3s;
            cursor: pointer;
            user-select: none;
            &:hover {
              background-color: orange;
              color: #fff;
            }
          }
          .category-icon {
            color: rgb(255, 217, 119);
          }
          .label-icon {
            color: rgb(140, 123, 253);
          }
        }
      }
    }
  }
  .pagination-box {
    height: 70px;
    .next-page-btn {
      padding: 13px 15px;
      border: 1px solid #ddd;
      border-radius: 3rem;
      color: #797979;
      width: 100px;
      user-select: none;
      cursor: pointer;
      text-align: center;
      &:hover {
        border: 1px solid orange;
        color: orange;
        box-shadow: 0 0 5px orange;
      }
    }
  }
}
</style>
